import { useState } from 'react';
import styles from './systemMaintenance.module.scss';
import { message } from 'antd';
const SystemMaintenance = () => {
    const [maintenanceMode, setMaintenanceMode] = useState(false);
    const [startDate, setStartDate] = useState('');
    const [startTime, setStartTime] = useState('');
    const [endDate, setEndDate] = useState('');
    const [endTime, setEndTime] = useState('');
    const [announcement, setAnnouncement] = useState('【系统维护中】\n亲爱的用户，我们正在进行系统维护，预计 04:00 完成。\n若有紧急问题，请联系 support@example.com。');

    const maintenanceRecords = [
        {
            id: 1,
            startTime: '2024-12-8 8:00',
            endTime: '2024-12-8 12:00',
            content: '数据库优化',
            maintainer: 'Admin'
        },
        {
            id: 2,
            startTime: '2025-1-9 22:00',
            endTime: '2025-1-10 2:00',
            content: '数据库优化',
            maintainer: 'Admin'
        },
        {
            id: 3,
            startTime: '2024-3-26 12:00',
            endTime: '2025-3-26 18:36',
            content: '服务器升级',
            maintainer: 'Admin'
        }
    ];

    const handleModeToggle = () => {
        setMaintenanceMode(!maintenanceMode);
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        // 处理提交逻辑
        console.log({
            maintenanceMode,
            startDateTime: `${startDate} ${startTime}`,
            endDateTime: `${endDate} ${endTime}`,
            announcement
        });
        message.success('系统维护设置更新成功');
    };

    return (
        <div className={styles.maintenance}>
            <h2 className={styles.maintenance__title}>系统维护</h2>

            <div className={styles.maintenance__section}>
                <div className={styles.maintenance__header}>
                    <h3>启用维护模式</h3>
                    <div className={styles.maintenance__switch} onClick={handleModeToggle}>
                        <div className={`${styles.maintenance__switchInner} ${maintenanceMode ? styles['maintenance__switchInner--active'] : ''}`}>
                            <span className={styles.maintenance__switchHandle}></span>
                        </div>
                        <span className={styles.maintenance__switchText}>
                            {maintenanceMode ? '已启用' : '已关闭'}
                        </span>
                    </div>
                </div>

                <form className={styles.maintenance__form} onSubmit={handleSubmit}>
                    <div className={styles.maintenance__formGroup}>
                        <label>设置维护时间</label>
                        <div className={styles.maintenance__timeRange}>
                            <div className={styles.maintenance__timeInput}>
                                <input
                                    type="date"
                                    value={startDate}
                                    onChange={(e) => setStartDate(e.target.value)}
                                />
                                <input
                                    type="time"
                                    value={startTime}
                                    onChange={(e) => setStartTime(e.target.value)}
                                />
                            </div>
                            <span>至</span>
                            <div className={styles.maintenance__timeInput}>
                                <input
                                    type="date"
                                    value={endDate}
                                    onChange={(e) => setEndDate(e.target.value)}
                                />
                                <input
                                    type="time"
                                    value={endTime}
                                    onChange={(e) => setEndTime(e.target.value)}
                                />
                            </div>
                            <button type="button" className={styles.maintenance__previewBtn}>
                                可以点击预览
                            </button>
                        </div>
                    </div>

                    <div className={styles.maintenance__formGroup}>
                        <label>设置维护公告</label>
                        <textarea
                            value={announcement}
                            onChange={(e) => setAnnouncement(e.target.value)}
                            rows="4"
                        />
                    </div>

                    <button type="submit" className={styles.maintenance__submitBtn}>
                        保存设置
                    </button>
                </form>
            </div>

            <div className={styles.maintenance__section}>
                <h3>维护记录</h3>
                <div className={styles.maintenance__table}>
                    <div className={styles.maintenance__tableHeader}>
                        <div>ID</div>
                        <div>开始维护时间</div>
                        <div>结束维护时间</div>
                        <div>维护内容</div>
                        <div>维护负责人</div>
                    </div>
                    <div className={styles.maintenance__tableBody}>
                        {maintenanceRecords.map(record => (
                            <div key={record.id} className={styles.maintenance__tableRow}>
                                <div>{record.id}</div>
                                <div>{record.startTime}</div>
                                <div>{record.endTime}</div>
                                <div>{record.content}</div>
                                <div>{record.maintainer}</div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default SystemMaintenance; 